<!-- Modal Main content -->
<div id="myModal" class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">详细信息</h4>
            </div>
            <div class="modal-body">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="main/map/#tab_1" data-toggle="tab" aria-expanded="true">基本信息</a></li>
                        <li class=""><a href="main/map/#tab_2" data-toggle="tab" aria-expanded="false">消费记录</a></li>
                        <li class=""><a href="main/map/#tab_3" data-toggle="tab" aria-expanded="false">使用变更</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_1">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-md-4">.col-md-4</div>
                                    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
                                    <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-9">
                                        Level 1: .col-sm-9
                                        <div class="row">
                                            <div class="col-xs-8 col-sm-6">
                                                Level 2: .col-xs-8 .col-sm-6
                                            </div>
                                            <div class="col-xs-4 col-sm-6">
                                                Level 2: .col-xs-4 .col-sm-6
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                        <!-- /.tab-pane -->
                        <div class="tab-pane" id="tab_2">
                            <table class="table table-striped">
                                <tbody><tr>
                                  <th>成本中心</th>
                                  <th>开始时间</th>
                                  <th>结束时间</th>
                                  <th>时长</th>
                                  <th>金额</th>
                                </tr>
                                <tr>
                                  <td>1.</td>
                                  <td>Update software</td>
                                  <td>
                                    <div class="progress progress-xs">
                                      <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
                                    </div>
                                  </td>
                                  <td><span class="badge bg-red">55%</span></td>
                                  <td>2.3</td>
                                </tr>
                                <tr>
                                  <td>2.</td>
                                  <td>Clean database</td>
                                  <td>
                                    <div class="progress progress-xs">
                                      <div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
                                    </div>
                                  </td>
                                  <td><span class="badge bg-yellow">70%</span></td>
                                  <td>2.3</td>
                                </tr>
                                <tr>
                                  <td>3.</td>
                                  <td>Cron job running</td>
                                  <td>
                                    <div class="progress progress-xs progress-striped active">
                                      <div class="progress-bar progress-bar-primary" style="width: 30%"></div>
                                    </div>
                                  </td>
                                  <td><span class="badge bg-light-blue">30%</span></td>
                                  <td>2.3</td>
                                </tr>
                                <tr>
                                  <td>4.</td>
                                  <td>Fix and squish bugs</td>
                                  <td>
                                    <div class="progress progress-xs progress-striped active">
                                      <div class="progress-bar progress-bar-success" style="width: 90%"></div>
                                    </div>
                                  </td>
                                  <td><span class="badge bg-green">90%</span></td>
                                  <td>2.3</td>
                                </tr>
                              </tbody></table>
                        </div>
                        <!-- /.tab-pane -->
                        <div class="tab-pane" id="tab_3">
                            <table class="table table-striped">
                                <tbody><tr>
                                  <th>成本中心</th>
                                  <th>责任人</th>
                                  <th>变更时间</th>
                                </tr>
                                <tr>
                                  <td>1.</td>
                                  <td>Update software</td>
                                  <td>
                                    2015-09-21 13:50
                                  </td>
                                </tr>
                                <tr>
                                  <td>2.</td>
                                  <td>Clean database</td>
                                  <td>
                                    2015-09-21 13:50
                                  </td>
                                </tr>
                                <tr>
                                  <td>3.</td>
                                  <td>Cron job running</td>
                                  <td>
                                    2015-09-21 13:50
                                  </td>
                                </tr>
                                <tr>
                                  <td>4.</td>
                                  <td>Fix and squish bugs</td>
                                  <td>
                                    2015-09-21 13:50
                                  </td>
                                </tr>
                              </tbody></table>
                        </div>
                        <!-- /.tab-pane -->
                    </div>
                    <!-- /.tab-content -->
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
